<template>
  <!-- 月计划-变更新增 -->
  <div class="e-form">
    <BillTop title="月计划变更新增" @cancel="cancel"></BillTop>
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form :model="formData" label-width="150px"
        :rules="rules"
          ref="formData"
          class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="月变更编号：">
                {{ formData.billNo }}

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单据机构：">
                {{ formData.orgName }}

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划年度：">
                {{ formData.year }}

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划月份：">
                 {{ formData.month }}

              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="不含税计划金额(元)：">
                {{formData.amount}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原计划金额(元)：">
                  {{ formData.totalAmount }}

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="税率%：" prop="taxRateChanged">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxRateChanged"
                  @blur="taxRateChangedblur"
                   v-enter-float="{
                                    set: this,
                                    val: 'formData',
                                    key: 'taxRateChanged'
                                }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税额：" prop="taxAmountChanged">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxAmountChanged"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="变更后计划金额(元)：">
                {{formData.totalAmountChanged}}

              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="变更日期：" prop="planDate">
                <el-date-picker
                  v-model="formData.planDate"
                  type="date"
                  placeholder="选择日期"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="币种：">
                {{ formData.currency }}

              </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="填报人：">{{
                formData.preparer
              }}</el-form-item>

            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
            <el-form-item label="变更期数：">
              {{formData.period}} </el-form-item>
              </el-col>
           <el-col :span="12">
              <el-form-item label="状态：" v-model="formData.state">

                 <span>{{['草稿','审核中','已审核','已关闭','','已作废'][formData.state]}}</span>
              </el-form-item>
               </el-col>
          </el-row>

          <el-row>
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"

              >
              </el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="本位币：">
              {{ formData.baseCurName }}

            </el-form-item>
          </el-row>
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="计划金额（本位币）：">
                {{formData.baseCurAmount}}

              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="本位币汇率：">
                {{ formData.baseCurRate }}

              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="buttons">

      <el-button type="primary" style="background: #2e61d7" @click="save('formData')"
        >保存</el-button
      >
      <el-button @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { mapMutations } from 'vuex'
import monthPlanApi from '@/api/materials/monthPlan.js'
export default {
    data () {
        return {
            //表单数据
            formData: {
                'amount': 0,
                'amountChanged': 0,
                'baseCurAmount': 0,
                'baseCurAmountChanged': 0,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'baseCurTaxAmount': 0,
                'baseCurTaxAmountChanged': 0,
                'baseCurTotalAmount': 0,
                'baseCurTotalAmountChanged': 0,
                'billId': '',
                'billNo': '',
                'currency': '',
                'currencyId': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'month': 0,
                'monthPlanBillId': '',
                'monthPlanBillNo': '',
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'period': 0,
                'planDate': '',
                'preparer': '',
                'preparerId': '',
                'remarks': '',
                'rmbAmount': 0,
                'rmbAmountChanged': 0,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': 0,
                'rmbTaxAmount': 0,
                'rmbTaxAmountChanged': 0,
                'rmbTotalAmount': 0,
                'rmbTotalAmountChanged': 0,
                'state': '0',
                'taxAmount': 0,
                'taxAmountChanged': 0,
                'taxRate': 0,
                'taxRateChanged': 0,
                'totalAmount': 0,
                'totalAmountChanged': 0,
                'workId': '',
                'year': 0,
                'yearPlanBillId': '',
                'yearPlanBillNo': ''
            },
            moneyList: [], //币种
            orgId: '', //机构id
            orgName: '', //机构名称
            billid: '',
            isSkip: false, //是否跳转
            materialId: '', //  物资id
            //验证
            rules: {
                planDate: [
                    { required: true, message: '请输入变更日期', trigger: 'change' },
                ],
                taxRateChanged: [{ required: true, message: '请填写税率', trigger: 'change' }],
                taxAmountChanged: [{ required: true, message: '请填写税额', trigger: 'change' }],
            },
        }
    },
    computed: {

    },
    components: {},
    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.orgId = data.userInfo.orgInfo.orgId
        this.orgName = data.userInfo.orgInfo.orgName
        this.billid = this.$route.query.billid
        this.formData.preparer = localStorage.getItem('userName')
        this.getData()

    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        ...mapMutations(['setPopConfirm']),
        //计算税额
        taxRateChangedblur () {
            this.formData.taxAmountChanged =  (this.formData.amount * this.formData.taxRateChanged) / 100
            this.formData.taxAmountChanged = this.formData.taxAmountChanged.toFixed(2)

        },
        //初始化变更单
        getData () {
            this.$Ajax
                .httpGet({
                    url: '/material/monthPlanChanged/initBaseData',
                    params: {
                        id: this.billid,
                    },
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                })
                .then(res => {
                    this.formData = res
                    res.materialId = this.materialId //新增变更明细时请带上我
                    this.formData.amount = this.formData.amount.toFixed(2)
                    this.formData.totalAmount = this.formData.totalAmount.toFixed(2)
                    this.formData.taxAmount = this.formData.taxAmount.toFixed(2)
                    this.formData.totalAmountChanged = this.formData.totalAmountChanged.toFixed(2)
                })
        },

        //保存按钮
        save (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    monthPlanApi.AddmonthPlanChanged(this.formData)
                        .then(res=> {
                            this.clientPop('suc', '保存成功,是否继续', ()=>{
                                this.$router.replace({
                                    path: '/monthPlanAlterationEdit',
                                    query: {
                                        billid: res,
                                        name: 'goodsAndMaterials'
                                    }
                                })
                            }, this.cancel)
                        })
                } else {
                    return false
                }
            })
        },
        //取消按钮
        cancel () {
            this.$router.push('/monthPlan')
        },

    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
